<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- :movies = "movies" 前面的movies是子组件中prop名字 后面的movies指的是父组件中的数据名 -->
    <Parent :movies="movies"></Parent>

  </div>
  <script src="./vue.js"></script>
  <script>
    /* 
      数据走向
        movies 从  app -> ul -> li

      父子通讯后，数据成功显示，不要直接在子组件中修改prop数据（父组件传递过来的数据）

      让子组件中的事件通知父组件，在对应的源头修改相关值，那么下游数据会自动修改

     */
    const Parent = {
      template: `
        <ul>
          <Child v-for="movie in movies" :key="movie" :movie="movie"></Child>
          <button @click="movies.push('电影4')">按钮</button>
        </ul>
      `,
      props: ['movies']
    }
    const Child = {
      template: `
        <li>{{movie}}</li>
      `,
      props: ['movie']
    }
    Vue.component('Parent', Parent)
    Vue.component('Child', Child)
    const app = new Vue({
      el: '#app',
      data: {
        movies: ['电影1', '电影2', '电影3']
      }
    })
  </script>
</body>
</html>